<template>
  <div class="note-menu">
    <!-- 数字音符区域 -->
    <div class="note-group">
      <div class="group-title">数字音符</div>
      
      <div class="note-row">
        <span class="row-label">超低音:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in LLNoteArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">低音:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in LNoteArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">中音:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in NoteArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">高音:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in HNoteArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">超高音:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in HHNoteArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">休止符:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in RestNote" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 记谱符号区域 -->
    <div class="note-group">
      <div class="group-title">记谱符号</div>
      
      <div class="note-row">
        <span class="row-label">谱号:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in ClefSymbolArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">音符时值:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in NoteValueArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">休止符时值:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in RestValueArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 装饰和表情记号 -->
    <div class="note-group">
      <div class="group-title">装饰与表情</div>
      
      <div class="note-row">
        <span class="row-label">变音记号:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in AccidentalArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">演奏技巧:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in ArticulationArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
      
      <div class="note-row">
        <span class="row-label">力度标记:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in DynamicArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 结构符号 -->
    <div class="note-group">
      <div class="group-title">结构符号</div>
      
      <div class="note-row">
        <span class="row-label">小节线:</span>
        <div class="note-buttons">
          <el-button @click="handleClick(item, $event)" v-for="(item, index) in BarlineArray" :key="index">
            <span class="music-font">{{ item.value }}</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore - 这些导入在模板中使用，但TypeScript没有检测到
import {
  LLNoteArray,
  LNoteArray,
  NoteArray,
  HNoteArray,
  HHNoteArray,
  RestNote,
  ClefSymbolArray,
  NoteValueArray,
  RestValueArray,
  AccidentalArray,
  ArticulationArray,
  DynamicArray,
  BarlineArray
} from '../../utils/MusicNoteEnums';

const emit = defineEmits<{
  (e: 'clickNumber', item: any): void;
}>();

const handleClick = (item: any, e?: MouseEvent) => {
  // 阻止事件冒泡，防止点击事件继续传播影响到其他元素
  if (e) {
    e.preventDefault();
    e.stopPropagation();
  }
  
  // 直接发送点击事件，附带一个标记表明这是来自左侧菜单的点击
  emit('clickNumber', { ...item, fromMenu: true });
};
</script>

<style scoped>
.note-menu {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 8px;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}

.note-group {
  margin-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}

.note-group:last-child {
  border-bottom: none;
}

.group-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
  padding-left: 5px;
  border-left: 3px solid #409EFF;
}

.note-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.row-label {
  font-size: 13px;
  color: #666;
  width: 70px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 6px;
}

.note-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
}

.note-buttons .el-button {
  padding: 3px 6px;
  margin: 0;
  height: 32px;
  min-width: 32px;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
  justify-content: center;
}

.music-font {
  display: inline-block;
}

/* 可滚动区域样式 */
.note-menu::-webkit-scrollbar {
  width: 6px;
}

.note-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.note-menu::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 3px;
}

.note-menu::-webkit-scrollbar-thumb:hover {
  background: #999;
}
</style>
